<template>
  <div class="self_adaption">
    <div class="g-container">
      <div class="other">
        <p class="main_text">订单列表</p>
      </div>
      <!-- 搜索 -->
      <div class="g-search" ref="searchBox">
        <!-- 时间选择区域 -->
        <span class="demonstration">提交时间：</span>
        <el-date-picker
          v-model="searchValue.startAt"
          type="date"
          placeholder="开始时间"
          @change="startTime"
          :clearable="false" />
        <span class="demonstration" style="display: inline-block; font-size: 12px; color: #898989; margin: 20px"
          >至</span
        >
        <el-date-picker
          v-model="searchValue.endAt"
          type="date"
          placeholder="结束时间"
          @change="endTime"
          :clearable="false" />
        <el-radio-group v-model="radio" class="ml-4" @change="radioSelect" style="margin-left: 10px">
          <el-radio label="1" size="large">今天</el-radio>
          <el-radio label="2" size="large">近7天</el-radio>
          <el-radio label="3" size="large">近30天</el-radio>
          <el-radio label="4" size="large">近3个月</el-radio>
        </el-radio-group>
        <!-- 信息区域 -->
        <div class="all_select">
          <!-- 订单编号 -->
          <div class="input_valye">
            <span class="demonstration">订单编号：</span>
            <input
              type="text"
              class="input"
              placeholder="请输入订单编号"
              v-model="searchValue.orderSn"
              @keyup.enter="search" />
          </div>
        </div>
        <!-- 底部按钮区域 -->
        <div class="bottom_btn">
          <el-button class="solid" @click="search">查询</el-button>
          <el-button class="hollow" @click="reset">重置</el-button>
        </div>
      </div>
      <!-- 表格 -->
      <div class="table">
        <!-- 表格导航栏 -->
        <div class="nav">
          <ul class="nav_ul">
            <li v-for="(item, index) in nav_list" :key="index" :class="item.class" @click="navChange(item)">
              <span class="nav_lis">{{ item.text }}</span>
            </li>
          </ul>
        </div>
        <!-- 顶部按钮区域 -->
        <div class="function_Btn" style="margin: 10px">
          <el-button class="hollow" @click="exportExcelList" v-if="roleList.write">导出订单信息</el-button>
        </div>
        <!-- 表格区域 -->
        <el-table
          id="out-table"
          :data="tableData"
          style="width: 100%"
          :header-cell-style="{'text-align': 'center'}"
          :show-overflow-tooltip="true"
          border>
          <el-table-column type="selection" width="40" />
          <el-table-column prop="orderSn" label="订单编号" align="center" />
          <el-table-column prop="createdAt" label="提交时间" align="center" />
          <el-table-column prop="updatedAt" label="更新时间" align="center" />
          <el-table-column prop="username" label="用户名" align="center">
            <template #default="item">
              {{ item.row.user.username }}
            </template>
          </el-table-column>
          <el-table-column prop="price" label="订单金额" align="center">
            <template #default="item">
              {{ item.row.price.toFixed(2) }}
            </template>
          </el-table-column>
          <el-table-column prop="payMethod" label="支付方式" align="center">
            <template #default="item">
              <span v-if="item.row.payMethod == 0">银行卡</span>
              <span v-else-if="item.row.payMethod == 1">微信</span>
              <span v-else-if="item.row.payMethod == 2">支付宝</span>
              <span v-else>钱包余额</span>
            </template>
          </el-table-column>
          <el-table-column prop="deviceInfo" label="订单来源" align="center" />
          <el-table-column prop="status" label="订单状态" width="100" align="center">
            <template #default="item">
              <span v-if="item.row.status == 0">待支付</span>
              <span v-else-if="item.row.status == 1">待发货</span>
              <span v-else-if="item.row.status == 2">待收货</span>
              <span v-else-if="item.row.status == 3">订单完成</span>
              <span v-else-if="item.row.status == 4">已关闭</span>
              <span v-else>待评价</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="250" class="operation">
            <template #default="item">
              <div class="table_btn">
                <el-button size="small" class="none" @click="look(item.row)" v-if="roleList.write">查看</el-button>
                <el-button class="none" v-if="item.row.status === 1" @click="deliver(item.row)">发货</el-button>
                <!-- <el-button
                  size="small"
                  class="none"
                  v-if="item.row.status === 2"
                  >提醒</el-button
                > -->
                <el-button class="none" @click="complaint(item.row)">投诉</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <smartPager
          v-model:current-page="searchValue.page"
          v-model:page-size="searchValue.rows"
          :total="total"
          @change="pageChange" />
      </div>
    </div>
    <!-- 发货 -->
    <div class="deliver" v-show="deliverShow">
      <div class="title1">
        <div class="title_mes">
          <el-icon size="20" color="#fff"> <Edit /> </el-icon>&nbsp;订单发货
        </div>
        <span class="close" @click="maskBtn1">✖</span>
      </div>
      <div class="content1">
        <div class="mes_title">订单发货信息</div>
        <!-- 表格区域 -->
        <el-table
          id="out-table"
          :data="delivereData"
          height="300px"
          style="width: 100%"
          :show-overflow-tooltip="true"
          :header-cell-style="{
            'text-align': 'center',
            background: '#F2F7FC !important',
          }">
          <el-table-column prop="orderSn" label="订单编号" align="center" />
          <el-table-column prop="username" label="收货人" align="center">
            <template #default="item">
              {{ item.row.addressInfo.receiver }}
            </template>
          </el-table-column>
          <el-table-column prop="phone" label="收货人手机号" align="center">
            <template #default="item">
              {{ item.row.addressInfo.phone }}
            </template>
          </el-table-column>
          <el-table-column prop="address" label="地址" align="center">
            <template #default="item"> {{ item.row.addressInfo.area }}{{ item.row.addressInfo.address }} </template>
          </el-table-column>
        </el-table>
        <!-- 添加表单字段 -->
        <!-- <button class="add_table_name" type="button" @click="addLogistics">
          +添加表单字段
        </button> -->
        <!-- 按钮区域 -->
        <div class="btn_center">
          <el-button class="hollow" @click="maskBtn1">取消</el-button>
          <el-button class="solid" @click="deliverSure">确定</el-button>
        </div>
      </div>
    </div>
    <!-- 站内信息 -->
    <div class="plateform" v-show="plateformShow">
      <div class="title1">
        <div class="title_mes">
          <el-icon size="20" color="#fff"> <Edit /> </el-icon>&nbsp;发消息
        </div>
        <span class="close" @click="maskBtn1">✖</span>
      </div>
      <div class="content1">
        <div class="mes">
          <span class="text">标题：&nbsp;&nbsp;</span>
          <el-input placeholder="请输入标题" v-model="sendStieMes.subject" />
        </div>
        <div class="mes">
          <span class="text">内容：&nbsp;&nbsp;</span>
          <el-input
            type="textarea"
            :rows="5"
            placeholder="内容不超过100字"
            maxlength="100"
            show-word-limit
            v-model="sendStieMes.message" />
        </div>
        <div class="btn">
          <el-button class="hollow" @click="maskBtn1">取消</el-button>
          <el-button class="solid" @click="plateformSure">确定</el-button>
        </div>
      </div>
    </div>
    <!-- 我要投诉 -->
    <div class="appeal" v-show="appealShow">
      <div class="title1">
        <div class="title_mes">
          <el-icon size="20" color="#fff"> <Edit /> </el-icon>&nbsp;我要投诉
        </div>
        <span class="close" @click="maskBtn1">✖</span>
      </div>
      <div class="content1">
        <div style="height: 30px"></div>
        <el-form ref="ruleFormRef" :model="complaintMes" label-width="120px" label-position="top"
          ><el-form-item label="投诉对象:" prop="userName" style="width: 100%">
            <el-input v-model="complaintMes.userName" class="form_input" :disabled="true" />
            <span id="input_hint"></span>
          </el-form-item>
          <el-form-item label="订单编号:" prop="orderSn" style="width: 100%">
            <el-input v-model="complaintMes.orderSn" class="form_input" :disabled="true" />
            <span id="input_hint"></span>
          </el-form-item>
          <el-form-item label="投诉类型:" prop="type" style="width: 100%">
            <el-select v-model="complaintMes.type" class="m-2">
              <el-option v-for="item in rating_options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
            <!-- <el-input v-model="complaintMes.type" class="form_input" /> -->
            <span id="input_hint"></span>
          </el-form-item>
          <el-form-item label="投诉原因:" prop="reason" style="width: 100%">
            <el-input v-model="complaintMes.reason" class="form_input" />
            <span id="input_hint"></span>
          </el-form-item>
          <el-form-item label="投诉内容说明:" prop="description" style="width: 100%">
            <el-input
              v-model="complaintMes.description"
              class="form_input"
              cols="30"
              rows="4"
              type="textarea"
              maxlength="250"
              show-word-limit />
            <span id="input_hint"></span>
          </el-form-item>
          <el-upload
            action="#"
            list-type="picture-card"
            :auto-upload="false"
            :on-change="GoodsFiles"
            v-model:file-list="fileList1"
            ref="uploadImg"
            :limit="5">
            <el-icon>
              <Plus />
            </el-icon>
          </el-upload>
        </el-form>
        <div class="btn_center">
          <el-button class="hollow" @click="maskBtn1">取消</el-button>
          <el-button class="solid" @click="appealSure">确定</el-button>
        </div>
      </div>
    </div>
    <!-- 查看订单 -->
    <el-drawer
      v-model="orderShow"
      class="order"
      size="700px"
      style="position: absolute !important; z-index: 40 !important"
      @close="maskBtn1"
      :z-index="70">
      <div class="box fristbox">
        <div class="title">
          <img src="@/assets/images/shop/goods/贴纸.png" alt="" class="photo" />
          <div class="right">
            <el-steps
              :active="orderAllMes.order.status == 3 ? 5 : statusShow + 1"
              align-center
              finish-status="success"
              v-if="statusShow !== 4">
              <el-step title="提交订单" :description="orderAllMes.order.createdAt" />
              <el-step title="支付订单" :description="orderAllMes.order.payTime" v-if="orderAllMes.order.status > 0" />
              <el-step title="支付订单" description="未支付" v-else />
              <el-step title="平台发货" description="已发货" v-if="orderAllMes.order.status > 1" />
              <el-step title="平台发货" description="未发货" v-else />
              <el-step title="确认收货" description="已收货" v-if="orderAllMes.order.status > 2" />
              <el-step title="确认收货" description="未收货" v-else />
              <el-step title="交易完成" description="等待评价" v-if="orderAllMes.order.status == 5" />
              <el-step title="交易完成" description="已完成" v-else-if="orderAllMes.order.status == 3" />
              <el-step title="交易完成" description="未完成" v-else />
            </el-steps>
            <el-steps :active="1" align-center class="close_order" finish-status="success" v-else>
              <el-step title="提交订单" :description="orderAllMes.order.createdAt" />
              <el-step title="已关闭" description="2023-07-19 15:14:12" :icon="CircleClose" />
            </el-steps>
            <!-- 待付款 -->
            <div class="text" v-if="statusShow === 0">
              <div class="shop">
                等待买家付款
                <p class="plat_mes" @click="sendMes">
                  <el-icon> <Message /> </el-icon>&nbsp;&nbsp;发消息
                </p>
              </div>
              <p class="text1">
                若买家未付款，订单将会在 <span class="time">01</span>天<span class="time">15</span>小时<span
                  class="time"
                  >36</span
                >分钟&nbsp;&nbsp;后关闭
              </p>
            </div>
            <!-- 待发货 -->
            <div class="text" v-if="statusShow === 1">
              <div class="shop">
                等待商家发货
                <p class="plat_mes" @click="sendMes">
                  <el-icon> <Message /> </el-icon>&nbsp;&nbsp;发消息
                </p>
              </div>
              <p class="text1">
                买家已付款，请在 <span class="time">01</span>天<span class="time">15</span
                >小时&nbsp;&nbsp;内发货，超时可能会判罚
              </p>
              <div class="btn1">
                <el-button class="solid" @click="deliverAll('Single')">发货</el-button>
                <el-button class="hollow" @click="cancledeliver">取消订单</el-button>
              </div>
            </div>
            <!-- 待收货 -->
            <div class="text" v-if="statusShow === 2">
              <div class="shop">
                等待买家收货
                <p class="plat_mes" @click="sendMes">
                  <el-icon> <Message /> </el-icon>&nbsp;&nbsp;发消息
                </p>
              </div>
              <p class="text1">
                商家已发货，订单将在<span class="time">01</span>天<span class="time">15</span
                >小时&nbsp;&nbsp;后自动确认收货
              </p>
            </div>
            <!-- 已完成 -->
            <div class="text" v-if="statusShow === 3">
              <div class="shop">
                订单已完成
                <p class="plat_mes" @click="sendMes">
                  <el-icon> <Message /> </el-icon>&nbsp;&nbsp;发消息
                </p>
              </div>
            </div>
            <!-- 已关闭 -->
            <div class="text">
              <div class="shop" v-if="statusShow === 4">
                订单已关闭
                <p class="plat_mes" @click="sendMes">
                  <el-icon> <Message /> </el-icon>&nbsp;&nbsp;发消息
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="mes">
          <div class="info1">订单编号：{{ orderAllMes.order.orderSn }}</div>
          <div class="info1">用户可得积分：{{ orderAllMes.order.integral }}</div>
          <div class="info1">提交时间：{{ orderAllMes.order.createdAt }}</div>
          <div class="info1">订单来源：{{ orderAllMes.order.deviceInfo }}</div>
          <div class="info1">活动信息：{{ orderAllMes.order.deviceInfo }}</div>
          <div class="info1" v-if="noteAdd" style="display: flex; align-items: center">
            <el-input placeholder="请输入订单备注" v-model="orderNote"></el-input>&emsp;
            <el-button class="solid" @click="AddNote">确认</el-button>
          </div>
          <div class="info1" v-if="orderAllMes.order.note === null && !noteAdd">
            备注：<span class="addremark" @click="noteAdd = !noteAdd">添加</span>
          </div>
          <div class="info1" v-if="orderAllMes.order.note !== null">备注：{{ orderAllMes.order.note }}</div>
        </div>
      </div>
      <!-- 订单相关信息 -->
      <div class="box">
        <div class="user_play">
          <div class="title">
            <div class="box1"></div>
            <span class="name">收货人信息</span>&nbsp;&nbsp;
            <span v-if="orderAllMes.order.status == 0 || orderAllMes.order.status == 1">
              <el-icon color="#116CF8" v-if="!EditConsignee" @click="EditConsigneeMes">
                <EditPen />
              </el-icon>
              <span v-else style="font-size: 14px; color: #116cf8; cursor: pointer">
                <span style="color: #aaaaaa" @click="consigneeCancle">取消</span>&nbsp;
                <span @click="consigneeSure">确认</span>
              </span>
            </span>
          </div>
          <div>
            <div class="row">
              <span class="name1"
                >收货人：<span v-if="!EditConsignee">{{ orderAllMes.order.addressInfo.receiver }}</span>
                <el-input type="text" v-else v-model="EditAddressMes.receiver"
              /></span>
            </div>
            <div class="row">
              <span class="name1"
                >联系电话：<span v-if="!EditConsignee">{{ orderAllMes.order.addressInfo.phone }}</span>
                <el-input type="text" v-else v-model="EditAddressMes.phone"
              /></span>
            </div>
            <div class="row">
              <span class="name1"
                >收货地址：<span v-if="!EditConsignee"
                  >{{ orderAllMes.order.addressInfo.area }}{{ orderAllMes.order.addressInfo.address }}</span
                >
                <div v-else>
                  <el-cascader v-model="EditAddressMes.area" :options="regionData" style="width: 100%" />
                  <el-input type="textarea" style="margin-top: 5px" v-model="EditAddressMes.address" />
                </div>
              </span>
            </div>
          </div>
        </div>
        <div class="user_play">
          <div class="title">
            <div class="box1"></div>
            <span class="name">付款信息</span>
          </div>
          <div class="row">
            <span class="name1">付款金额：{{ orderAllMes.order.price }}</span>
          </div>
          <div class="row">
            <span class="name1"
              >付款方式： <span v-if="orderAllMes.order.payMethod == 0">银行卡</span
              ><span v-else-if="orderAllMes.order.payMethod == 1">微信</span
              ><span v-else-if="orderAllMes.order.payMethod == 2">支付宝</span><span v-else>钱包余额</span></span
            >
          </div>
          <div class="row">
            <span class="name1">付款时间：{{ orderAllMes.order.payTime }}</span>
          </div>
        </div>
        <div class="user_play">
          <div class="title">
            <div class="box1"></div>
            <span class="name">配送信息</span>
          </div>
          <div class="row">
            <span class="name1">
              配送状态：
              <span v-if="orderAllMes.order.status == 0 || orderAllMes.order.status == 1">待发货</span>
              <span v-else-if="orderAllMes.order.status == 2">已发货</span>
              <span v-else-if="orderAllMes.order.status == 3 || orderAllMes.order.status == 5">已签收</span>
              <span v-else>--</span>
            </span>
          </div>
          <div class="row">
            <span class="name1"
              >物流单号：
              <span v-if="orderAllMes.order.status > 1">
                <!-- {{orderAllMes.logistics.logisticSn}} -->
                单号
              </span>
              <span v-else>--</span></span
            >
          </div>
        </div>
      </div>
      <!-- 物流信息 -->
      <div class="box">
        <div class="head_title">
          <div class="box1"></div>
          物流信息
        </div>
        <!-- 表格区域 -->
        <el-table
          :data="logistics"
          style="width: 100%"
          :show-overflow-tooltip="true"
          :header-cell-style="{
            'text-align': 'center',
            background: '#F2F7FC !important',
          }">
          <el-table-column type="expand">
            <template #default="props">
              <div class="logistics">
                <el-timeline>
                  <el-timeline-item v-for="(activity, index) in activities" :key="index" :timestamp="activity.time">
                    {{ activity.context }}
                  </el-timeline-item>
                </el-timeline>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="company" label="物流公司" align="center" />
          <el-table-column prop="logisticSn" label="物流单号" align="center" />
          <el-table-column prop="status" label="物流状态" align="center">
            <template #default="props">
              <span v-if="props.row.status == 1">未发货</span>
              <span v-else-if="props.row.status == 2">待收货</span>
              <span v-else-if="props.row.status == 5 || props.row.status == 3">已收货</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 发票信息 -->
      <div class="box" v-if="orderAllMes.invoice != null">
        <div class="head_title">
          <div class="box1"></div>
          发票信息
        </div>
        <!-- 表格区域 -->
        <el-table
          :data="invoice"
          style="width: 100%"
          :show-overflow-tooltip="true"
          :header-cell-style="{
            'text-align': 'center',
            background: '#F2F7FC !important',
          }">
          <el-table-column prop="type" label="发票类型" width="100" align="center" />
          <el-table-column prop="riseType" label="发票抬头类型" width="160" align="center" />
          <el-table-column prop="invoiceHeader" label="发票类型" width="100" align="center" />
          <el-table-column prop="content" label="发票内容" width="100" align="center" />
          <el-table-column prop="phone" label="收票人手机" width="100" align="center" />
          <el-table-column prop="email" label="收票人邮箱" width="100" align="center" />
        </el-table>
      </div>
      <!-- 商品信息 -->
      <div class="box">
        <div class="head_title">
          <div class="box1"></div>
          商品信息
        </div>
        <!-- 表格区域 -->
        <el-table
          :data="product"
          style="width: 100%"
          :show-overflow-tooltip="true"
          :header-cell-style="{
            'text-align': 'center',
            background: '#F2F7FC !important',
          }">
          <el-table-column label="商品图片" width="100" align="center">
            <template #default="item">
              <el-image
                :preview-src-list="[item.row.mainImgUrl]"
                :src="item.row.mainImgUrl"
                style="width: 100px; height: 100px" />
            </template>
          </el-table-column>
          <el-table-column prop="name" label="商品名称" width="160" align="center" />
          <el-table-column prop="salePrice" label="售价" width="100" align="center" />
          <el-table-column prop="dealPrice" label="议价" width="100" align="center">
            <template #default="item">
              <el-input v-model="item.row.dealPrice" :disabled="item.row.disabled" />
            </template>
          </el-table-column>
          <el-table-column prop="orderQuantity" label="数量" width="100" align="center" />
          <el-table-column prop="skuName" label="属性" width="100" align="center" />
          <el-table-column prop="note" label="备注" width="200" align="center">
            <template #default="item">
              <el-input
                v-model="item.row.note"
                rows="3"
                type="textarea"
                :disabled="item.row.disabled"
                v-if="item.row.note != null || !item.row.disabled" />
              <div v-else>-</div>
            </template>
          </el-table-column>
          <el-table-column prop="price" label="小计" width="100" align="center"> </el-table-column>
          <el-table-column label="操作" width="180" align="center" v-if="statusShow === 0">
            <template #default="item">
              <el-button
                size="small"
                class="deposit"
                v-show="item.row.disabled"
                @click="orderEdit(item.row)"
                v-if="roleList.write"
                >修改</el-button
              >
              <el-button size="small" class="deposit" v-show="!item.row.disabled" @click="orderSure(item.row)"
                >确认</el-button
              >
              <el-button size="small" class="deposit" v-show="!item.row.disabled" @click="orderCancle(item.row)"
                >取消</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 费用信息 -->
      <div class="box">
        <div class="head_title">
          <div class="box1"></div>
          费用信息
        </div>
        <!-- 表格区域 -->
        <el-table
          :data="cost"
          style="width: 100%"
          :show-overflow-tooltip="true"
          :header-cell-style="{
            'text-align': 'center',
            background: '#F2F7FC !important',
          }">
          <el-table-column prop="finalPrice" label="订单合计" align="center" />
          <el-table-column prop="districtMoney" label="优惠金额" width="100" align="center" />
          <el-table-column prop="price" label="实际应付金额" align="center" />
        </el-table>
      </div>
      <!-- 操作信息 -->
      <div class="box">
        <div class="head_title">
          <div class="box1"></div>
          操作信息
        </div>
        <!-- 表格区域 -->
        <el-table
          :data="Operation"
          style="width: 100%"
          :show-overflow-tooltip="true"
          :header-cell-style="{
            'text-align': 'center',
            background: '#F2F7FC !important',
          }">
          <el-table-column prop="adminId" label="操作者" align="center" />
          <el-table-column prop="createdAt" label="操作时间" width="170" align="center" />
          <el-table-column prop="orderStatus" label="订单状态" align="center" />
          <el-table-column prop="note" label="备注" align="center">
            <template #default="item">
              <span v-if="item.row.note == ''">-</span>
              <span v-else>{{ item.row.note }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-drawer>
    <el-dialog title="详情" v-if="cancelOrderShow" width="30%" align-center v-model="cancelOrderShow">
      <template #header>
        <div class="df aic">
          <el-icon style="color: #fff" size="20"> <Edit /> </el-icon>&nbsp;
          <p style="color: #fff">是否确认取消订单</p>
        </div>
      </template>
      <div class="df aic jcc" style="flex-wrap: wrap">
        <p style="width: 100%">请填写取消原因</p>
        <el-input placeholder="请输入" v-model="cancleCause" style="margin-top: 10px" />
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button class="hollow" @click="maskBtn1">取消</el-button>
          <el-button class="solid" @click="cancleOrderSure">确认</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 遮罩层 -->
    <div id="mask1" v-if="mask" @click="maskBtn1"></div>
  </div>
</template>
<script setup lang="ts">
import {ref, onMounted, watch, onBeforeUnmount} from 'vue';
import {
  RequestOrderDeliver,
  RequestOrderAllDeliver,
  RequestOrderMes,
  RequestOrderLook,
  RequestOrderClose,
  RequestSendSiteMes,
  RequestOrderPrice,
  RequestOrderOperation,
  RequestOrderAddNote,
  RequestUpdateOrderAddress,
  RequestComplaintShop,
  RequestDepponTraceByOrderSn,
  RequestOrderOutPutOrderExcel,
} from '@/api/path/index.js';
import {Message, CircleClose, Edit, EditPen, Plus} from '@element-plus/icons-vue';
import moment from 'moment';
import {ElMessage} from 'element-plus';
import {useRouter} from 'vue-router';
import {regionData} from 'element-china-area-data';
import useAuthorize from '@/hooks/authorize';
import {exportFile} from '@/utils/exportFile.js';
import {formatTimeHan} from '@/utils/index';
let roleList = useAuthorize(); //按钮权限
const router = useRouter();
/**
 * 导出信息
 */
const exportExcelList = () => {
  RequestOrderOutPutOrderExcel({
    shopId: shopId,
    orderSn: searchValue.value.orderSn,
    status: searchValue.value.status,
    startAt: searchValue.value.startAt,
    endAt: searchValue.value.endAt, 
  }).then((res: any) => {
    if (res.type == 'application/json') {
      ElMessage.error('暂无数据导出');
    } else {
      exportFile(res, `${formatTimeHan(new Date())}订单明细`);
    }
  });
};
const tableData = ref<any>([]); // 表格列表
const total = ref(0); //表格总数
const deliverShow = ref(false); //控制发货显示
const mask = ref(false); //控制遮罩层显示
const orderShow = ref(false); //控制查看订单显示
const plateformShow = ref(false); //控制站内信息显示
const cancelOrderShow = ref(false); //控制取消订单显示
const orderEditShow = ref(false); //控制修改商品价格显示
// 挂载
onMounted(() => {
  const urlSearch = window.location.search.split('=')[1];
  if (urlSearch != undefined) {
    nav_list.value.forEach((item) => {
      item.class = ['nav_li'];
      if (item.status == urlSearch) {
        item.class.push('navlist');
      }
    });
    searchValue.value.status = urlSearch;
  }
  acquireOrder();
  handleResize();
  window.addEventListener('resize', handleResize);
});
const searchBox = ref(); //搜索框
const tablelistHeight = ref(); //搜索框高度
const handleResize = () => {
  const searchBoxHeight = searchBox.value.clientHeight;
  tablelistHeight.value = 110 + searchBoxHeight + 'px';
};
onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize);
});
/**
 * 表格导航列表
 */
const nav_list = ref([
  {
    class: ['navlist', 'nav_li'],
    text: '全部',
    status: '',
  },
  {
    class: ['nav_li'],
    text: '待支付',
    status: 0,
  },
  {
    class: ['nav_li'],
    text: '待发货',
    status: 1,
  },
  {
    class: ['nav_li'],
    text: '待收货',
    status: 2,
  },
  {
    class: ['nav_li'],
    text: '订单完成',
    status: 3,
  },
  {
    class: ['nav_li'],
    text: '已关闭',
    status: 4,
  },
  {
    class: ['nav_li'],
    text: '待评价',
    status: 5,
  },
]);
/**
 * 获取订单
 */
const acquireOrder = async () => {
  const a = await RequestOrderMes(searchValue.value);
  tableData.value = a.resultObj.orders;
  total.value = a.resultObj.totalCount;
};
const adminId = JSON.parse(localStorage.getItem('roleInfo') as string).id;
/**
 * 表格导航点击事件
 */
const navChange = (item: any) => {
  nav_list.value.forEach((it) => {
    it.class = ['nav_li'];
  });
  item.class.push('navlist');
  searchValue.value.status = item.status;
  searchValue.value.page = 1;
  acquireOrder();
};

/*******************************************  搜索  *******************************************/
const radio = ref(''); //时间选择框
const shopId = Number(localStorage.getItem('ShopId'));
// 搜索参数
const searchValue = ref({
  shopId: shopId,
  orderSn: '',
  status: '',
  startAt: '',
  endAt: '',
  page: 1,
  rows: 10,
});
/**
 * 时间范围单选按钮
 */
const radioSelect = () => {
  searchValue.value.startAt = '';
  searchValue.value.endAt = '';
  var now = new Date();
  now.setHours(0);
  now.setMinutes(0);
  now.setSeconds(0);
  var now1 = new Date();
  now1.setHours(23);
  now1.setMinutes(59);
  now1.setSeconds(59);
  searchValue.value.endAt = moment(now1).format('YYYY-MM-DD HH:mm:ss');
  if (radio.value === '1') {
    searchValue.value.startAt = moment(now).format('YYYY-MM-DD HH:mm:ss');
  } else if (radio.value === '2') {
    searchValue.value.startAt = moment(now).subtract(7, 'days').format('YYYY-MM-DD HH:mm:ss');
  } else if (radio.value === '3') {
    searchValue.value.startAt = moment(now).subtract(30, 'days').format('YYYY-MM-DD HH:mm:ss');
  } else {
    searchValue.value.startAt = moment(now).subtract(3, 'months').format('YYYY-MM-DD HH:mm:ss');
  }
  search();
};
// 开始时间
const startTime = () => {
  searchValue.value.startAt.setHours(0);
  searchValue.value.startAt.setMinutes(0);
  searchValue.value.startAt.setSeconds(0);
  searchValue.value.startAt = moment(searchValue.value.startAt).format('yyyy-MM-DD HH:mm:ss');
  radio.value = '0';
  search();
};
// 结束时间
const endTime = () => {
  searchValue.value.endAt.setHours(23);
  searchValue.value.endAt.setMinutes(59);
  searchValue.value.endAt.setSeconds(59);
  searchValue.value.endAt = moment(searchValue.value.endAt).format('yyyy-MM-DD HH:mm:ss');
  radio.value = '0';
  search();
};
/**
 * 搜索
 */
const search = async () => {
  if (moment(searchValue.value.startAt).diff(moment().format('YYYY-MM-DD HH:mm:ss')) >= 0) {
    ElMessage.error('开始时间不能晚于当前日期');
    searchValue.value.startAt = '';
  } else {
    if (searchValue.value.startAt !== '' && searchValue.value.endAt !== '') {
      if (moment(searchValue.value.startAt).diff(moment(searchValue.value.endAt)) <= 0) {
        searchValue.value.page = 1;
        acquireOrder();
      } else {
        ElMessage.error('结束时间不能早于开始时间');
        searchValue.value.endAt = '';
      }
    } else {
      searchValue.value.page = 1;
      acquireOrder();
    }
  }
};
/**
 * 点击重置
 */
const reset = () => {
  searchValue.value = {
    shopId: shopId,
    orderSn: '',
    status: '',
    startAt: '',
    endAt: '',
    page: 1,
    rows: 10,
  };
  acquireOrder();
  radio.value = '';
};

/**
 * 查看的所有数据和事件
 */
const logistics = ref<any>([]); //物流信息
const invoice = ref<any>([]); //发票信息
const statusShow = ref(0); //当前订单状态
const activities = ref<any>([]); //时间线
const noteAdd = ref(false); //控制备注的显示
const Operation = ref<any>([]); //操作信息数组
const orderNote = ref('');
/**
 * 添加备注的确认属性
 */
const AddNote = () => {
  new Promise((resolve, reject) => {
    RequestOrderAddNote(orderNote.value, orderAllMes.value.order.id)
      .then((res: any) => {
        resolve(res);
        orderAllMes.value.order.note = orderNote.value;
        noteAdd.value = false;
      })
      .catch((err: any) => {
        reject(err);
      });
  });
};
/**
 * 点击查看
 */
const orderAllMes = ref<any>({
  order: {
    status: '',
  },
});
const product = ref<any>([]); //商品信息
const cost = ref<any>([]); //费用信息
const order = ref<any>([]); //处理发货订单数据
const look = async (item: any) => {
  order.value[0] = item;
  // 获取当前订单状态
  statusShow.value = item.status;
  // 获取所有信息
  const a = await RequestOrderLook(item.id);
  orderAllMes.value = a.resultObj;
  // 地址信息
  if (orderAllMes.value.order.addressInfo == null) {
    orderAllMes.value.order.addressInfo = {
      area: '',
      address: '',
      phone: '',
      receiver: '',
    };
  } else {
    orderAllMes.value.order.addressInfo = JSON.parse(orderAllMes.value.order.addressInfo.value);
  }
  // 处理商品费用
  cost.value = [
    {
      finalPrice: orderAllMes.value.order.price,
      transportFee: 0,
      districtMoney: 0,
      note: '',
      price: orderAllMes.value.order.price - 0,
    },
  ];
  product.value = [];
  // 处理商品信息
  for (let i = 0; i < a.resultObj.orderProducts.length; i++) {
    product.value[i] = {
      skuId: a.resultObj.orderProducts[i].skuId,
      id: a.resultObj.orderProducts[i].product.id,
      mainImgUrl: '',
      name: a.resultObj.orderProducts[i].product.name,
      salePrice: a.resultObj.orderProducts[i].product.salePrice,
      dealPrice: a.resultObj.orderProducts[i].finalPrice,
      orderQuantity: a.resultObj.orderProducts[i].quantity,
      skuName: a.resultObj.orderProducts[i].skuName,
      price: a.resultObj.orderProducts[i].quantity * a.resultObj.orderProducts[i].finalPrice,
      // refundPrice: AfterSaleList.value.afterSale.refundPrice,
      description: a.resultObj.orderProducts[i].description,
      imgs: a.resultObj.orderProducts[i].imgs,
      note: a.resultObj.orderProducts[i].note,
      disabled: true,
    };
    // 判断商品有无图片
    if (a.resultObj.orderProducts[i].product.pics[0]) {
      product.value[i].mainImgUrl = a.resultObj.orderProducts[i].product.pics[0].url;
    }
  }
  // 获取操作日志
  const operate = await RequestOrderOperation(orderAllMes.value.order.id);
  Operation.value = operate.resultObj;
  // 获取物流信息
  const logistics = await RequestDepponTraceByOrderSn(order.value[0].orderSn);
  console.log('物流信息', logistics);

  // 显示组件
  orderShow.value = true;
  order.value[0].addressInfo = JSON.parse(order.value[0].addressInfo.value);
};
const EditConsignee = ref(false); //是否正在修改收货人信息
/**
 * 点击修改收货人地址
 */
const EditAddressMes1 = ref();
const EditAddressMes = ref();
const EditConsigneeMes = () => {
  EditConsignee.value = !EditConsignee.value;
  EditAddressMes1.value = JSON.stringify(orderAllMes.value.order.addressInfo); //用于存放数据
  EditAddressMes.value = JSON.parse(EditAddressMes1.value);
  EditAddressMes.value.area = EditAddressMes.value.area.split(',');
};
/**
 * 取消修改地址信息
 */
const consigneeCancle = () => {
  EditConsignee.value = !EditConsignee.value;
};
/**
 * 确认修改地址信息
 */
const consigneeSure = async () => {
  if (
    EditAddressMes.value.area.length != 3 ||
    EditAddressMes.value.address ||
    EditAddressMes.value.phone ||
    EditAddressMes.value.receiver
  ) {
    const regex = /^1[3|4|5|6|7|8|9]\d{9}$/;
    if (regex.test(EditAddressMes.value.phone)) {
      const a = await RequestUpdateOrderAddress({
        area: EditAddressMes.value.area.join(','),
        address: EditAddressMes.value.address,
        phone: EditAddressMes.value.phone,
        orderId: orderAllMes.value.order.id,
        receiver: EditAddressMes.value.receiver,
      });
      if (a.msg == '操作成功！') {
        EditConsignee.value = !EditConsignee.value;
        ElMessage.success('修改成功！');
        orderAllMes.value.order.addressInfo.receiver = EditAddressMes.value.receiver;
        orderAllMes.value.order.addressInfo.phone = EditAddressMes.value.phone;
        orderAllMes.value.order.addressInfo.address = EditAddressMes.value.address;
        orderAllMes.value.order.addressInfo.area = EditAddressMes.value.area.join(',');
        order.value[0].addressInfo = orderAllMes.value.order.addressInfo;
      } else {
        ElMessage.success('修改失败！');
      }
    } else {
      ElMessage.error('请输入正确的手机号');
    }
  } else {
    ElMessage.error('请输入所有信息');
  }
};
/*************************  取消订单  *************************/
const cancledeliver = () => {
  cancelOrderShow.value = true;
};
/**
 * 表格单点发货
 */
const deliver = (item: any) => {
  order.value[0] = item;
  order.value[0].addressInfo = JSON.parse(order.value[0].addressInfo.value);
  deliverAll('Single');
};
const delivereData = ref<any>([]); // 表格列表
/**
 * 批量发货
 */
const delivereType = ref('All');
const ifTrue = ref(true);
const deliverAll = (value: string) => {
  // if (order.value[0].addressInfo.type == 'jsonb') {
  //   order.value[0].addressInfo = JSON.parse(order.value[0].addressInfo.value);
  // }
  console.log('发货', order.value);

  if (order.value.length != 0) {
    // 判断选择的是否都是待发货的商品
    ifTrue.value = true;
    for (let i = 0; i < order.value.length; i++) {
      if (order.value[i].status != 1) {
        ifTrue.value = false;
        break;
      }
    }
    if (ifTrue.value) {
      delivereType.value = value;
      if (order.value !== 0) {
        delivereData.value = order.value;
      } else {
        delivereData.value = [];
      }
      deliverShow.value = true;
      mask.value = true;
    } else {
      ElMessage.error('只能选择订单状态为待发货的订单');
    }
  } else {
    ElMessage.error('请选择要发货的订单');
  }
  console.log('订单数组', delivereData.value);
};
/**
 * 发货确认事件
 */
const deliverSure = async () => {
  const deliverList = ref<any>([]);
  for (let i = 0; i < delivereData.value.length; i++) {
    deliverList.value.push({
      orderId: delivereData.value[i].id,
    });
  }
  console.log(deliverList.value);
  // 批量发货
  if (delivereType.value === 'All') {
    new Promise((resolve, reject) => {
      RequestOrderAllDeliver(deliverList.value)
        .then((res: any) => {
          resolve(res);
          acquireOrder();
          deliverShow.value = false;
          mask.value = false;
        })
        .catch((err: any) => {
          reject(err);
        });
    });
  } else {
    //单个发货
    const a = await RequestOrderDeliver(deliverList.value[0]);
    statusShow.value = a.resultObj;
    if (a.msg == '操作成功！') {
      deliverShow.value = false;
      mask.value = false;
      ElMessage.success('操作成功');
      acquireOrder();
    }
  }
};
/**************************************************  投诉  **************************************************/
/**
 * 点击投诉
 */
const complaint = (item: any) => {
  appealShow.value = true;
  mask.value = true;
  complaintMes.value.orderSn = item.orderSn;
  complaintMes.value.userId = item.user.id;
  complaintMes.value.userName = item.user.username;
};
const appealShow = ref(false); //控制投诉息显示
const fileList1 = ref([]); //控制图片
const complaintMes = ref<any>({
  complaintType: 0, //0商家投诉用户 1用户投诉商家
  shopId: localStorage.getItem('ShopId'), //店铺id
  contact: JSON.parse(localStorage.getItem('userMes')!).mobile, //联系方式
  userId: '', //用户id
  userName: '', //用户id
  orderSn: '', //订单号
  reason: '', //原因
  description: '', //描述
  complaintImgs: [], //投诉图片
  type: '',
}); //投诉信息
/**
 * 投诉类型选择器
 */
const rating_options = ref([
  {
    value: '0',
    label: '异常下单',
  },
  {
    value: '1',
    label: '异常售后',
  },
  {
    value: '2',
    label: '异常会话',
  },
]);
const uploadImg = ref();
const GoodsFiles = (file: any) => {
  return new Promise((resolve, reject) => {
    if (
      file.raw.type === 'image/jpeg' ||
      file.raw.type === 'image/jpg' ||
      file.raw.type === 'image/bmp' ||
      file.raw.type === 'image/png' ||
      file.raw.type === 'image/gif' ||
      file.raw.type === 'image/tiff'
    ) {
      console.log('zzzzzzzzzzzzzzzz', file.size);

      if (file.size / 1024 / 1024 > 5) {
        uploadImg.value.handleRemove(file);
        ElMessage.error('该图片大小不能超过5M');
        reject();
      } else {
        resolve('验证通过');
      }
    } else {
      uploadImg.value.handleRemove(file);
      ElMessage.error('该图片仅支持JPG，JPEG，BMP，PNG，GIF，TIFF');
      reject();
    }
  });
};
/**
 * 确认投诉
 */
const appealSure = async () => {
  for (let i = 0; i < fileList1.value.length; i++) {
    complaintMes.value.complaintImgs[i] = await Base64(fileList1.value[i].raw);
  }
  const a = await RequestComplaintShop({
    complaintType: 0, //0商家投诉用户 1用户投诉商家
    shopId: complaintMes.value.shopId, //店铺id
    contact: complaintMes.value.contact, //联系方式
    userId: complaintMes.value.userId, //用户id
    orderSn: complaintMes.value.orderSn, //订单号
    reason: complaintMes.value.reason, //原因
    description: complaintMes.value.description, //描述
    complaintImgs: complaintMes.value.complaintImgs, //投诉图片
    type: complaintMes.value.type,
  });
  if (a.msg == '操作成功！') {
    ElMessage.success('操作成功！');
    maskBtn1();
    acquireOrder();
  } else {
    ElMessage.error('操作失败！请重试！');
  }
};

const Base64 = (file: any) => {
  return new Promise((resolve, reject) => {
    let reader = new FileReader();
    let fileResult = '';
    reader.readAsDataURL(file);
    reader.onload = function () {
      fileResult = reader.result;
    };
    reader.onerror = function (error) {
      reject(error);
    };
    reader.onloadend = function () {
      resolve(fileResult);
    };
  });
};
/**
 * 发送站内信
 */
const sendStieMes = ref({
  subject: '',
  message: '',
});

/**
 * 发送站内信
 */
const sendMes = () => {
  console.log(orderAllMes.value.user.id);
  router.push('/Service/call_center?id=C2CU' + orderAllMes.value.user.id);
};
/**
 * 站内信确认
 */
const plateformSure = () => {
  const a = {
    userId: orderAllMes.value.order.id,
    adminId: adminId,
    subject: sendStieMes.value.subject,
    message: sendStieMes.value.message,
    orderStatus: orderAllMes.value.order.status,
  };
  new Promise((resolve, reject) => {
    RequestSendSiteMes(a)
      .then((res: any) => {
        resolve(res);
        plateformShow.value = false;
        mask.value = false;
        ElMessage.success('发送成功');
      })
      .catch((err: any) => {
        reject(err);
        ElMessage.error('发送失败');
      });
  });
};

const cancleCause = ref(''); //取消发货的原因

/**
 * 取消发货确认
 */
let loading = ref(false); //设置记录时间，用于防抖
let timer = ref(null); //设置记录时间，用于防抖
const cancleOrderSure = () => {
  if (timer != null) {
    clearTimeout(timer);
  }
  timer = setTimeout(async () => {
    loading.value = true;
    const a = {
      orderId: orderAllMes.value.order.id,
      adminId: adminId,
      note: cancleCause.value,
      orderStatus: orderAllMes.value.order.status,
    };
    new Promise((resolve, reject) => {
      RequestOrderClose(a)
        .then((res: any) => {
          resolve(res);
          mask.value = false;
          cancelOrderShow.value = false;
          orderShow.value = false;
          ElMessage.success('操作成功！');
          acquireOrder();
          loading.value = false;
        })
        .catch((err: any) => {
          reject(err);
          ElMessage.error('操作失败！');
          loading.value = false;
        });
    });
  }, 500);
};

const verify = ref(false); //验证订单是否通过
const DealPrice = ref(0);
/**
 * 点击修改商品价格，属性，备注
 */
const orderEdit = (item: any) => {
  item.disabled = false;
  DealPrice.value = item.orderDealPrice;
};
/**
 * 监听议价的改变，返回当前计算的正确价格
 */
watch(
  () => product.value.map((item: any) => item.dealPrice),
  () => {
    // 当orderDealPrice数组发生变化时，更新对应的price属性
    product.value.forEach((item: any) => {
      item.price = item.orderQuantity * item.dealPrice;
    });
  },
);

/**
 * 修改订单属性确认
 */
const newOrderPrice = ref(0); //修改订单后的总价
const orderSure = (item: any) => {
  // 议价输入的正则验证
  const regex = /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/;
  console.log('议价', item.dealPrice);
  if (regex.test(item.dealPrice) && item.dealPrice > 0) {
    verify.value = true;
  } else {
    verify.value = false;
  }
  newOrderPrice.value = 0;
  // 判断是否符合验证
  if (!verify.value) {
    ElMessage.error('请输入正确的价格');
  } else {
    for (let i = 0; i < product.value.length; i++) {
      newOrderPrice.value = newOrderPrice.value + product.value[i].price;
    }
    console.log('订单修改222', newOrderPrice.value);
    const a = {
      orderId: orderAllMes.value.order.id,
      note: item.note,
      adminId: adminId,
      skuCode: item.skuCode,
      dealPrice: item.dealPrice,
      productId: item.id,
      skuId: item.skuId,
      newOrderPrice: newOrderPrice.value,
      // orderStatus: orderAllMes.value.order.status,
    };
    new Promise((resolve, reject) => {
      RequestOrderPrice(a)
        .then((res: any) => {
          resolve(res);
          item.disabled = true;
          console.log('');

          if (res.msg == '操作成功！') {
            ElMessage.success('修改成功');
            cost.value[0].price = res.resultObj;
            console.log(cost.value[0].price);
          } else {
            ElMessage.error('修改失败');
          }
        })
        .catch((err: any) => {
          reject(err);
          ElMessage.error('修改失败');
        });
    });
  }
};
/**
 * 取消修改
 */
const orderCancle = (item: any) => {
  item.disabled = true;
  item.orderDealPrice = DealPrice.value;
  look(order.value[0]);
};
/**
 * 遮罩层数据
 */
const maskBtn1 = () => {
  deliverShow.value = false;
  mask.value = false;
  plateformShow.value = false;
  cancelOrderShow.value = false;
  orderEditShow.value = false;
  noteAdd.value = false;
  EditConsignee.value = false;
  orderNote.value = '';
  appealShow.value = false;
  complaintMes.value = {
    complaintType: 0,
    shopId: localStorage.getItem('ShopId'),
    contact: JSON.parse(localStorage.getItem('userMes')!).mobile,
    userId: '',
    userName: '',
    orderSn: '',
    reason: '',
    description: '',
    complaintImgs: [],
    type: '',
  };
  fileList1.value = [];
};
/**
 * 分页
 */
const pageChange = async (val: number) => {
  acquireOrder();
};
</script>
<style lang="scss" scoped>
@import '@/assets/css/plateform/Article/Content.css';
@import '@/assets/css/plateform/Shop/GoodsManage.css';

.table {
  height: calc(100% - v-bind(tablelistHeight)) !important;
}

::v-deep .el-table--fit {
  height: calc(100% - 150px) !important;
}

.table :deep(.el-table__cell) {
  text-align: center;
}

::v-deep .el-step.is-center .el-step__description {
  padding: 0 !important;
}

.el-form-item :deep(.el-input-group__prepend) {
  width: 10px;
  background-color: #116cf8;
  color: #fff;
}

.el-form-item :deep(.el-upload--picture-card) {
  height: 100px;
  width: 100px;
  opacity: 0;
}

.photoBox {
  width: 148px;
  height: 148px;
  border-radius: 5px;
  border: 1px dashed var(--el-border-color-darker);
  background: #fafafa;
  position: relative;

  .el-icon {
    position: absolute;
    top: 50%;
    margin-top: -10px;
    left: 50%;
    margin-left: -10px;
    font-size: 20px;
  }
}

.nav_ul {
  width: 100%;

  .nav_li {
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .nav_lis {
    position: relative;
    cursor: pointer;

    .number {
      padding: 0 5px;
      display: block;
      line-height: 16px;
      height: 16px;
      color: #fff;
      font-size: 12px;
      background: #409eff;
      border-radius: 8px;
      position: absolute;
      top: 2px;
      right: -12px;
    }
  }

  .navlist {
    .number {
      background: #409eff;
      color: #fff;
    }
  }
}

.btn {
  width: 150px;
  position: absolute;
  right: 20px;
  bottom: 40px;
}

:deep(.el-input__wrapper) {
  width: 150px;
}

// :deep(.el-drawer.rtl) {
//     background: #f5f9ff !important;
//     width: 750px !important;
// }
::v-deep .el-drawer.rtl {
  background: #f5f9ff !important;
  width: 750px !important;
}

:deep(.el-overlay) {
  z-index: 40 !important;
  padding: static;
}

/**
 *  发货页面
 */
.deliver {
  width: 80%;
  height: 70%;
  background: #fff;
  position: absolute;
  z-index: 90;
  top: 10%;
  left: 10%;

  .mes_title {
    display: flex;
    height: 60px;
    align-items: center;
    border-bottom: 1px solid #efefef;
  }

  .el-table {
    margin-top: 20px;
  }

  .add_table_name {
    width: 100%;
    border: 1px dotted #84b3fb;
    background: #e7f0fe;
    height: 40px;
    line-height: 40px;
    color: #2075f8;
    font-size: 16px;
    margin-top: 20px;
  }
}

/**
 * 站台页面
 */
.plateform {
  width: 30%;
  height: 40%;
  position: absolute;
  background: #fff;
  z-index: 9999;
  top: 25%;
  left: 35%;

  .mes {
    margin-top: 20px;
    display: flex;
    align-items: center;

    .text {
      display: inline-block;
      width: 60px;
      font-size: 14px;
      color: #6c6c6c;
    }
  }
}

/**
 * 投诉页面
 */
.appeal {
  width: 70%;
  height: 90%;
  background: #ffff;
  position: absolute;
  top: 0;
  left: 15%;
  z-index: 99;
}

/**
 * 投诉页面
 */
.appeal {
  width: 70%;
  height: 90%;
  background: #ffff;
  position: absolute;
  top: 0;
  left: 15%;
  z-index: 99;
}

/**
 * 查看订单
 */
.order {
  .box {
    width: 96%;
    padding: 20px;
    background: #ffffff;
    margin: 20px auto;
    display: flex;
    flex-wrap: wrap;

    .title {
      width: 100%;
      display: flex;
      border-bottom: 1px solid #edf0f4;

      .photo {
        width: 100px;
        height: 100px;
      }

      .right {
        flex: 1;

        .flow {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-evenly;

          .step {
            width: 90px;
            height: 90px;
            text-align: center;
            font-size: 14px;
            color: #adadad;

            .el-icon {
              font-size: 25px;
            }

            .number {
              width: 23px;
              height: 23px;
              border-radius: 50%;
              line-height: 20px;
              text-align: center;
              margin: 0 auto;
              margin-bottom: 5px;
              border: 2px solid #adadad;
            }

            .step_time {
              font-size: 12px;
              margin-top: 5px;
            }
          }

          .line {
            width: 50px;
            height: 2px;
            background: #ebedf1;
          }

          .finish_line {
            background: #70b7ff;
          }

          .finish {
            color: #409eff;

            .step_time {
              color: #82c0ff;
            }
          }

          .current1 {
            color: #409eff;

            .number {
              border: 0;
              background: #409eff;
              color: #fff;
              line-height: 23px;
            }
          }
        }

        .text {
          width: 100%;
          margin: 10px 0 25px 0;

          .shop {
            width: 100%;
            height: 30px;
            font-size: 18px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: #3d3d3d;
            font-weight: bold;
            margin-top: 20px;

            .plat_mes {
              font-size: 14px;
              color: #ababab;
              display: flex;
              align-items: center;
              cursor: pointer;
            }

            .el-icon {
              color: #000000;
              font-size: 20px;
            }
          }

          .time {
            display: inline-block;
            padding: 5px;
            background: #f5f9ff;
            color: #409eff;
          }

          .text1 {
            font-size: 14px;
            color: #ababab;
          }
        }
      }
    }

    .mes {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;

      .info1 {
        width: 195px;
        font-size: 14px;
        color: #797979;
        margin-top: 15px;
      }

      .addremark {
        display: inline-block;
        color: #116cf8;
        margin-left: 10px;
        font-size: 12px;
      }
    }

    .user_play {
      width: 33%;
      font-size: 14px;

      .box1 {
        width: 3px;
        height: 15px;
        border: 0;
        background: #116cf8;
        margin-right: 10px;
      }

      .name {
        font-weight: bold;
        font-size: 16px;
      }

      .title {
        display: flex;
        border: 0;
        align-items: center;
        font-size: 15px;
        margin-bottom: 15px;
      }

      .row {
        margin-top: 5px;

        .name1 {
          color: #b8b8b8;
        }
      }
    }

    .head_title {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      font-size: 16px;
      font-weight: bold;

      .box1 {
        width: 3px;
        height: 20px;
        background: #116cf8;
        margin-right: 10px;
      }
    }

    .logistics {
      margin-top: 20px;
    }

    .deposit {
      background: #fff;
      border: 0px;
      color: #409eff;
    }
  }

  .fristbox {
    margin-top: 0px;
  }
}

:deep(.el-drawer__header) {
  margin: 0;
}

:deep(.is-process) {
  color: #409eff;
}

:deep(.is-process .el-step__icon.is-text) {
  border: 2px solid #409eff;
  background: #409eff;
  color: #fff;
}

:deep(.is-finish .el-step__line) {
  background: #409eff;
}

.close_order :deep(.is-process) {
  color: #f57373;
}

.close_order :deep(.is-process .el-step__icon.is-text) {
  border: 2px solid #f57373;
  background: #fff;
}

.close_order :deep(.is-finish .el-step__line) {
  background: #f57373;
}

/**
 * 取消订单
 */
.cancle_order {
  width: 30%;
  height: 30%;
  position: absolute;
  background: #fff;
  z-index: 9999;
  top: 25%;
  left: 35%;
  padding: 0 40px;

  .title2 {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .title_mes {
      font-size: 16px;
      font-weight: bold;
      color: #303133;
    }

    .close {
      cursor: pointer;
    }
  }

  .text {
    display: inline-block;
    color: #64666a;
    font-size: 14px;
    margin-top: 25px;
  }

  .el-input {
    margin-top: 20px;
  }
}

.order_edit {
  position: fixed;
  width: 40%;
  height: 50%;
  background: #fff;
  z-index: 300;
  top: 25%;
  left: 25%;
  overflow: scroll;

  .el-form {
    position: relative;
    z-index: 350;
    padding: 20px 50px;

    .el-form-item {
      position: relative;
      z-index: 400;

      .el-input {
        position: relative;
        z-index: 700;
      }
    }
  }
}

.el-table .warning-row {
  background: #44a2ff !important;
}

::deep(.el-table--enable-row-transition .el-table__body td.el-table__cell) {
  z-index: initial !important;
}

::v-deep .el-table--enable-row-transition .el-table__body td.el-table__cell {
  z-index: initial !important;
}
</style>
